<template>
  <div>
    <el-form
      ref="form"
      :model="form"
      :inline="true"
      label-width="0"
      class="form"
    >
      <el-form-item
        :prop="item.key"
        v-for="item in options"
        :key="item.key"
        :label="item.title"
      >
        <div v-if="$slots[item.key]">
          <slot :name="item.key"></slot>
        </div>
        <div v-else >
          <el-input
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'text'"
            :placeholder="
              item.placeholder ? item.placeholder : '请输入' + item.title
            "
            :disabled="item.disabled"
            clearable
          ></el-input>
          <el-input
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'clickText'"
            @click.native="handleChange($event,item.event)"
            :placeholder="
              item.placeholder ? item.placeholder : '请点击选择' + item.title
            "
            :disabled="item.disabled"
            readonly
          ></el-input>
          <el-select
            class="w100"
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'select'"
            clearable
            @change="handleChange($event,item.event)"
            :placeholder="
              item.placeholder ? item.placeholder : '请选择' + item.title
            "
            :disabled="item.disabled"
            :multiple="item.multiple"
          >
            <el-option
              v-for="data in item.option.data"
              :key="data[item.option.props.key]"
              :label="data[item.option.props.label]"
              :value="data[item.option.props.value]"
            >
            </el-option>
          </el-select>
          <el-cascader
            class="w100"
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'cascader'"
            :disabled="item.disabled"
            :options="item.option.data"
            :props="item.option.props"
            clearable
          ></el-cascader>
          <el-date-picker
            class="w100"
            type="month"
            :placeholder="
              item.placeholder ? item.placeholder : '请选择' + item.title
            "
            value-format="yyyy-MM-dd"
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'dateMonth'"
            :disabled="item.disabled"
          ></el-date-picker>
          <el-date-picker
            class="w100"
            type="year"
            :placeholder="
              item.placeholder ? item.placeholder : '请选择' + item.title
            "
            value-format="yyyy"
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'dateYear'"
            :disabled="item.disabled"
          ></el-date-picker>
          <el-date-picker
            class="w100"
            type="date"
            :placeholder="
              item.placeholder ? item.placeholder : '请选择' + item.title
            "
            value-format="yyyy-MM-dd"
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'date'"
            :disabled="item.disabled"
          ></el-date-picker>
          <el-date-picker
            class="w100"
            type="datetime"
            :placeholder="
              item.placeholder ? item.placeholder : '请选择' + item.title
            "
            value-format="yyyy-MM-dd HH:mm:ss"
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'datetime'"
            :disabled="item.disabled"
          ></el-date-picker>
           <el-date-picker
            class="w100"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'date-to-date'"
            :disabled="item.disabled"
          ></el-date-picker>
          <gdAreaSelectVue
            class="w100"
            v-if="item.type === 'gdAreaSelect'"
            v-model="form[item.key]"
            :size="size"
            @changeGdArea="changeGdArea($event,item)"
          />
        </div>
      </el-form-item>
      <el-form-item class="form-button">
        <el-button class="filter-item" size="mini" @click="reset">
         {{ $t('table.reset') }}
       </el-button>
        <el-button class="filter-item" size="mini" type="primary" @click="search">
         {{ $t('table.search') }}
       </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
import gdAreaSelectVue from '@/components/GdAreaSelect/GdAreaSelect.vue'

export default {
    name:'SearchForm',
    components:{
      gdAreaSelectVue,
    },
    props:{
        // 表单
        form: {
        type: Object,
        default: function() {
            return {};
        }
        },
        // 表单配置
        options: {
        type: Array,
        default: function() {
            return [];
        }
        },
        // 控件大小
      size: {
        type: String,
        default: function() {
          return "";
        }
      },
    },
    methods:{
        search(){
            this.$emit('searchUpdate')
        },
        reset(){
            this.$emit('resetSearchData')
        },
        handleChange(e,methods){
          if(methods){
            this.$emit('toLoadMethods',methods)
          }
        },
        changeGdArea(areaData,item){
          if(item.changeFn){
            item.changeFn(areaData)
          }
        }
    }
}
</script>

<style lang="scss" scoped>

// 2023.9.9 按运管服的样式进行了修改 ----------------开始-------------------------
::v-deep .el-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    .el-form-item{
        width: 33.3%;
        display: flex;
        margin-right: 0;
        margin-bottom: 14px;
    }
    .el-form-item__label{
        width: 110px !important;
    }
    .el-form-item__content{
        width: calc(100% - 110px);
    }
    .el-range-editor.el-input__inner{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
    .el-button {
        margin-left: 10px !important;
        margin-right: 0;
    }
    .el-date-editor.el-input, .el-date-editor.el-input__inner{
        width: 100%;
    }
    .el-cascader{
    width: 100%;
  }
}
.form-button{
    display: flex;
    justify-content: right;
    text-align: right;
    flex: 1;
}
// 2023.9.9 按运管服的样式进行了修改 ----------------结束-------------------------

</style>
